<template>
    <div :class="couponsItemClass">
        <div class="coupons-item-content">
            <div v-if="modeType === 'discount'" class="price-line">
                <div class="price"><span>{{(price * 10).toFixed(2) - 0}}</span> 折</div>
                <div class="price-condition">{{quotaRule}}</div>
            </div>
            <div v-else class="price-line">
                <div class="price">￥<span>{{price}}</span></div>
                <div class="price-condition">{{quotaRule}}</div>
            </div>
            <div class="info">
                <div class="desc-line text-overflow">{{name}}</div>
                <div class="time-line">{{timeValue}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@common/format';
import { COUPONS_TYPE } from '@constants/coupons';
export default {
    name: 'DiscountItem',
    components: {},
    props: {
        name: String,
        price: Number,
        quota: Number,
        modeType: String, // 'voucher'-红包 'limit'-特价券 'cut'-减价券 'discount' -折扣券
        timeType: String,
        day: Number,
        afterDay: Number,
        startDate: Number,
        endDate: Number,
    },
    computed: {
        couponsItemClass() {
            const { modeType } = this.$props;
            return `coupons-item coupons-type-list coupons-mod-${modeType}`;
        },
        timeValue() {
            const { timeType, day, afterDay, startDate, endDate } = this.$props;
            if (timeType === 'fromBeginToEnd') {
                return `${formatDate(startDate)} 至 ${formatDate(endDate)}`;
            }
            if (timeType === 'daysAfterAcquired') {
                return `${afterDay ? '次日生效，' : ''}领券后${day}天内有效`;
            }
            return '';
        },
        quotaRule() {
            const { quota, modeType, modeValue } = this.$props;
            if (modeType === 'cut' || quota > 0) {
                return quota > 0 ? `满${quota}可用` : '无门槛';
            } else {
                return COUPONS_TYPE[modeType];
            }
        },
    },
};
</script>

<style lang="less" scoped>
@coupons-item-width: 200px;
@coupons-item-height: 105px;
.coupons-item {
    position: relative;
    .border-radius();
    color: @white;
    overflow: hidden;
    &.coupons-type-list {
        // .p(@gap-md);
        .coupons-item-content {
            .flex();
            .price-line {
                width: 20%;
                .flex-column-center();
                .p-h(@gap-md);
                .price > span {
                    .font-size(27px);
                    font-weight: @font-weight-bold;
                }
                .price-condition {
                    .font-size-sm();
                    .flex-column-center();
                    color: @gray-dark;
                }
            }
            .info {
                flex: 1;
                .flex();
                flex-direction: column;
                justify-content: center;
                .p(@gap-md);
                border-left: 1px dashed rgba(255, 255, 255, .3);
                position: relative;
                &::before, &::after {
                    content: '';
                    position: absolute;
                    width: @gap;
                    height: @gap;
                    background-color: @white;
                    top: -@gap-sm;
                    left: -(@gap-sm + 1);
                    border-radius: @gap;
                    border-style: solid;
                    border-width: 1px;
                }
                &::after {
                    top: auto;
                    bottom: -@gap-sm;
                }
            }
            .desc-line {
                .font-size();
                color: @text-color;
            }
            .time-line {
                .m-t(@gap);
                .font-size-sm();
                color: @gray-dark;
            }
        }
        &.coupons-mod-voucher {
            .price-line {
                color: @red;
            }
            .coupons-item-content {
                background-color: rgba(222,32,34,0.04);
                border: 1px solid #DE2022;
                border-radius: @border-radius;
                .info {
                    border-left-color: #DE2022;
                    &::before, &::after {
                        border-color: #DE2022;
                    }
                }
            }
        }
        &.coupons-mod-limit,
        &.coupons-mod-cut,
        &.coupons-mod-discount {
            .price-line {
                color: #E76915;
            }
            .coupons-item-content {
                background-color: rgba(231,105,21,0.04);
                border: 1px solid #E76915;
                border-radius: @border-radius;
                .info {
                    border-left-color: #E76915;
                    &::before, &::after {
                        border-color: #E76915;
                    }
                }
            }
        }
    }
}
</style>

